import {lazy,Suspense,FC} from "react";
import {Navigate,useRoutes} from "react-router-dom";

//懒加载
//登录页面
const login = lazy(()=>import("../pages/Login/index"));
//首页
const page = lazy(()=>import("../layouts/home"));
const notfound=lazy(()=>import("../pages/404/index"))

//高阶组件 Suspense
const lazyload = (Com : FC)=>{
    return (
        <Suspense fallback={""}>
            <Com />
        </Suspense>
    )
}

//路由的配置
const routes = [
    {
        path : "/",
        element : lazyload(login),
    },
    {
        path : "/page",
        element : lazyload(page),
        children : [
            {
                path : "/page/a",
                element : <h1>a</h1>
            },
        ]
    },
    {
        path:"/404",
        element:lazyload(notfound)
    },
    {
        path:"/*",
        element:<Navigate to="/404"/>
    }
]

//自定义hooks是个函数
export const useAppRoutes = ()=>{
    return useRoutes(routes);
}

export default routes